<template>
  <div class="login-box">
    <div class="login_header">
      远程视频查勘系统
    </div>
    <div class="login-main">
      <div class="login-main-acpass">
        <p class="login-main-title">用户登录</p>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <el-form-item prop="userName">
            <el-input ref="userName" name="userName" autocomplete="off" placeholder="请输入账号"
              v-model="loginForm.userName">
              <template slot="prepend">
                <i class="el-icon-user"></i>
                账号
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="userPassWd">
            <el-input type="password" placeholder="请输入密码" v-model="loginForm.userPassWd"
              @keyup.enter.native="handleLogin">
              <template slot="prepend">
                <i class="el-icon-unlock"></i>
                密码
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="danger" :loading="loading" @click="handleLogin()">登录</el-button>
      </div>
    </div>
    <div class="login_bottom">
      中国人民财产保险股份有限公司 版权所有 京ICP备10011380号-2
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import CryptoJS from 'crypto-js'
import { getUserInfo } from '@/api/user'

export default {
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      loginForm: {
        userName: Cookies.get('jzshUserCode') || '',
        userPassWd: '',
        passWd: '',
        type: '1',
        deviceInfo: '1',
        UDID: "123",
      },
      loginRules: {
        usercode: [{ required: true, trigger: 'blur', validator: validateUsername }],
        userPass: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.loginForm.passWd = CryptoJS.MD5(this.loginForm.userPassWd).toString();
          getUserInfo(this.loginForm).then(res => {
            this.loading = false;
            this.$store.dispatch('user/setUserInfo', res);
            this.$store.dispatch('user/setToken', res.token);
            this.$router.push('/home')
          }).catch(() => {
            this.loading = false;
          })
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.login-box {
  height: 100vh;
}

.login_header {
  height: 80px;
  background: #000;
  border-bottom: 4px solid #e7340c;
  font-size: 30px;
  color: #fff;
  text-indent: 40px;
  line-height: 80px;
}

.login-main {
  height: calc(100% - 135px);
  background: url("../../assets/login_imges/login_background.jpg");
  background-size: 100% 100%;

  .login-main-acpass {
    height: 350px;
    width: 400px;
    position: absolute;
    right: 12%;
    top: 23.5%;
    border: 1px solid #d2d2d2;
    border-top: 4px solid #e7340c;
    padding: 0 2%;
    color: #c0c0c0;

    .login-main-title {
      font-size: 16px;
      color: #e7340c;
      margin: 10% 0 5% 0;
    }
  }
}

.login_bottom {
  height: 55px;
  width: 100%;
  background: #fff;
  font-size: 12px;
  line-height: 55px;
  text-align: center;
  color: #c7c7c7;
  position: relative;
}

.el-input {
  input {
    background: none;
  }
}

.el-button {
  width: 100%;
  margin-top: 60px;
  background: #ef1c1c;
}

.el-button:active {
  color: #000;
}
</style>
